<template>
  <div>
    <div style="position: relative;" v-show="showDetail">
      <el-button class="upd-btn" v-show="showEdit" @click="showDetail=false" type="primary" size="small">编辑</el-button>
      <div class="detail_box">
        <el-descriptions title="基本信息">
          <el-descriptions-item label="工程名称">{{ detail.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="工程编号">{{ detail.number || '-' }}</el-descriptions-item>
          <el-descriptions-item label="勘察地点">{{ detail.location || '-' }}</el-descriptions-item>
          <el-descriptions-item label="勘察日期">{{ detail.surveyDate ? dateFormat(detail.surveyDate) : '-' }}</el-descriptions-item>
          <el-descriptions-item label="工程负责人">{{ detail.leaderName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="勘察人员">{{ detail.principals || '-' }}</el-descriptions-item>
          <el-descriptions-item label="作业类型">{{ detail.jobTypes || '-' }}</el-descriptions-item>
        </el-descriptions>
        <h2>工程信息</h2>
        <div class="detail" v-for="(item, index) in surveyJob">
          <el-row>
            <el-col :span="20">
              <div class="context"><span class="l-title">工作内容:</span>{{ item.content || '-' }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <div class="context"><span class="l-title">风险等级:</span>{{ item.level ?  dicsList.surveyRisk[item.level] : '-' }}</div>
            </el-col>
          </el-row>
          <div class="c-title" v-if="item.locationList && item.locationList.length > 0">工作地点</div>
          <el-row v-for="(location, index1) in item.locationList" :key="'loca'+index1">
            <el-col :span="20">
              <div class="context"><span class="l-title">地点名称:</span>{{ location.name || '-' }}</div>
            </el-col>
            <el-col :span="20" v-if="location.attachment && location.attachment.length > 0">
              <div class="context"><span class="l-title">附件:</span></div>
              <div class="img_box">
                <img v-for="imgSrc in location.attachment" @click="openImg(imgSrc)" :src="imgSrc" />
              </div>
            </el-col>
          </el-row>
          <div class="c-title" v-if="item.deviceList && item.deviceList.length > 0">工作设备</div>
          <el-row v-for="(device, index1) in item.deviceList" :key="'device'+index1">
            <el-col :span="20">
              <div class="context"><span class="l-title">设备名称:</span>{{ device.name || '-' }}</div>
            </el-col>
            <el-col :span="20" v-if="device.attachment && device.attachment.length > 0">
              <div class="context"><span class="l-title">附件:</span></div>
              <div class="img_box">
                <img v-for="imgSrc in device.attachment" @click="openImg(imgSrc)" :src="imgSrc" />
              </div>
            </el-col>
          </el-row>
        </div>
        <h2>现场勘察内容</h2>
        <div class="detail" v-for="(item, index) in surveyJob">
          <div v-for="(keynote, index1) in item.keynoteList" :key="'key'+index1">
            <div class="c-title" style="margin-top: 20px;">重点类型：{{keynote.type ? dicsList.focusTypes[keynote.type] : '-'}}</div>
            <div>
              <el-row v-if="keynote.type==='sfsjyxsb'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否涉及运行设备:</span>{{keynote.hasRunningDevice ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.runningDeviceList && keynote.runningDeviceList.length > 0">
                  <div class="context"><span class="l-title">运行设备列表:</span></div>
                  <div v-for="runDev in keynote.runningDeviceList">
                    <div class="context"><span class="l-title">设备名称:</span>{{runDev.name || '-'}}</div>
                    <div v-if="runDev.attachment && runDev.attachment.length > 0" class="img_box">
                      <img v-for="imgSrc in runDev.attachment" @click="openImg(imgSrc)" :src="imgSrc" />
                    </div>
                    <div class="context"><span class="l-title">是否停电:</span>{{runDev.isPowerCut ? '是' : '否'}}</div>
                    <div v-if="runDev.safeInfoList && runDev.safeInfoList.length > 0" class="img_box">
                      <div v-for="safeInfo in runDev.safeInfoList">
                        <div class="context"><span class="l-title">安全措施:</span>{{safeInfo.nam}}</div>
                        <div v-if="safeInfo.safePics && safeInfo.safePics.length > 0" class="img_box">
                          <img v-for="imgSrc in safeInfo.safePics" @click="openImg(imgSrc)" :src="imgSrc" />
                        </div>
                      </div>
                    </div>
                    <!-- <h4>安全措施</h4>
                    <div>{{keynote.measure || ''}}</div>
                    <h4>其他安全措施</h4>
                    <div>{{keynote.nam || ''}}</div> -->
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="keynote.type==='sfczzdyh'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否存在重大隐患:</span>{{keynote.hasMajorHiddenDanger ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20">
                  <div class="context"><span class="l-title">重大隐患类型:</span>{{ keynote.majorHiddenDangerType ?  dicsList.majorHiddenDangerType[keynote.majorHiddenDangerType] : '-' }}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.majorHiddenDangerList && keynote.majorHiddenDangerList.length > 0">
                  <div class="context"><span class="l-title">重大隐患照片列表:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.majorHiddenDangerList" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
                <el-col :span="20">
                  <h4>重大隐患信息</h4>
                  <div>{{keynote.majorHiddenDangerInfo || '-'}}</div>
                </el-col>
                <el-col :span="20">
                  <h4>重大隐患处置措施</h4>
                  <div>{{keynote.majorHiddenDangerMeasure || '-'}}</div>
                </el-col>
              </el-row>
              <el-row v-if="keynote.type==='sfsywhp'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否使用危化品:</span>{{keynote.hasHazardousChemicals ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.hazardousChemicalList && keynote.hazardousChemicalList.length > 0">
                  <div class="context"><span class="l-title">危化品列表:</span></div>
                  <div v-for="hazardousChemical in keynote.hazardousChemicalList" style="margin-left: 20px;">
                    <h4>危化品名称</h4>
                    <div>{{hazardousChemical.name || '-'}}</div>
                    <h4>危化品类型</h4>
                    <div>{{hazardousChemical.type ? dicsList.hazardousChemicals[hazardousChemical.type] : '-'}}</div>
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfkyzy'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否跨越作业:</span>{{keynote.hasCrossingOperation ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20">
                  <div class="context"><span class="l-title">跨越路线类型:</span>{{keynote.crossOperationType  ? dicsList.crossOperationType[keynote.crossOperationType] : '-'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.crossOperationAttachment && keynote.crossOperationAttachment.length > 0">
                  <div class="context"><span class="l-title">跨越路线照片:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.crossOperationAttachment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
                <el-col :span="20" v-if="keynote.powerLineList && keynote.powerLineList.length > 0">
                  <div class="context"><span class="l-title">强电线路列表:</span></div>
                  <div v-for="powerLine in keynote.powerLineList" style="margin-left: 20px;">
                    <div class="context"><span class="l-title">强电线路类型:</span>{{powerLine.type ? dicsList.powerLineType[powerLine.type] : '-'}}</div>
                    <div class="context"><span class="l-title">平行:</span>{{powerLine.cross || '-'}}</div>
                    <div class="context"><span class="l-title">距离(米):</span>{{powerLine.distance || '-'}}</div>
                    <div v-if="powerLine.attachment && powerLine.attachment.length > 0" class="context"><span class="l-title">照片列表:</span></div>
                    <div class="img_box" v-if="powerLine.attachment && powerLine.attachment.length > 0">
                      <img v-for="imgSrc in powerLine.attachment" @click="openImg(imgSrc)" :src="imgSrc" />
                    </div>
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfcgcxhjxzy'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否撤杆、撤线、紧线作业:</span>{{keynote.isPoleWireOperation ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否增设临时拉线:</span>{{keynote.hasAdditionalWire ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.additionalWireAttachment && keynote.additionalWireAttachment.length > 0">
                  <div class="context"><span class="l-title">临时拉线照片:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.additionalWireAttachment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfgczy'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否高空作业:</span>{{keynote.isAloftWork ? '是' : '否'}}</div>
                </el-col>
                <!-- <el-col :span="20">
                  <h4>是否使用辅助登高设备</h4>
                  <div>{{keynote.useAuxiliaryClimbingEquipment ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.auxiliaryClimbingEquipmentList && keynote.auxiliaryClimbingEquipmentList.length > 0">
                  <h4>辅助登高设备: </h4>
                  <div v-for="dgitem in keynote.auxiliaryClimbingEquipmentList" style="margin-left: 20px;">
                    <h4>设备名称</h4>
                    <div>{{dgitem.name || '-'}}</div>
                    <h4>危化品类型</h4>
                    <div>{{dgitem.type ? dicsList.auxiliaryClimbingEquipmentType[dgitem.type] : '-'}}</div>
                  </div>
                </el-col> -->
              </el-row>

              <el-row v-if="keynote.type==='sfqyzy'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否牵引作业:</span>{{keynote.isTractionOperation ? '是' : '否'}}</div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfyxkjzy'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否有限空间作业:</span>{{keynote.isLimitSpaceOperation ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20">
                  <h4>有限空间作业地点</h4>
                  <div>{{keynote.limitSpaceLocation || '-'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.limitSpaceLocationAttachment && keynote.limitSpaceLocationAttachment.length > 0">
                  <div class="context"><span class="l-title">有限空间作业地点照片:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.limitSpaceLocationAttachment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="context"><span class="l-title">安措布置位置信息:</span>{{keynote.limitSpaceSafetyLocation || '-'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.limitSpaceSafetyLocationAttachment && keynote.limitSpaceSafetyLocationAttachment.length > 0">
                  <div class="context"><span class="l-title">安措位置照片:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.limitSpaceSafetyLocationAttachment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
              </el-row>

              <el-row  v-if="keynote.type==='sflgzy'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否立杆作业:</span>{{keynote.isPoleErectionOperation ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.poleList && keynote.poleList.length > 0">
                  <div class="context"><span class="l-title">立杆列表:</span></div>
                  <div v-for="pole in keynote.poleList" style="margin-left: 20px;">
                    <div class="context"><span class="l-title">杆塔名称:</span>{{pole.name || '-'}}</div>
                    <div class="context"><span class="l-title">立杆位置照片:</span></div>
                    <div v-if="pole.attachment && pole.attachment.length > 0" class="img_box">
                      <img v-for="imgSrc in pole.attachment" @click="openImg(imgSrc)" :src="imgSrc" />
                    </div>
                    <div class="context"><span class="l-title">材质类型:</span>{{pole.material ? dicsList.lgzyCzlx[pole.material] : '-'}}</div>
                    <div class="context"><span class="l-title">人工杆塔/机械杆塔:</span>{{pole.type || '-'}}</div>
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfqzzy'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否起重作业:</span>{{keynote.isLiftingOperation ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.liftEquipmentList && keynote.liftEquipmentList.length > 0">
                  <div class="context"><span class="l-title">起重作业设备列表:</span></div>
                  <div v-for="liftEquipment in keynote.liftEquipmentList" style="margin-left: 20px;">
                    <div class="context"><span class="l-title">起重设备:</span>{{liftEquipment.type ? dicsList.liftEquipmentType[liftEquipment.type] : '-'}}</div>
                    <div class="context"><span class="l-title">停放点照片:</span></div>
                    <div v-if="liftEquipment.parkingLocation && liftEquipment.parkingLocation.length > 0" class="img_box">
                      <img v-for="imgSrc in liftEquipment.parkingLocation" @click="openImg(imgSrc)" :src="imgSrc" />
                    </div>
                    <div class="context"><span class="l-title">操作位置照片:</span></div>
                    <div v-if="liftEquipment.operationLocation && liftEquipment.operationLocation.length > 0" class="img_box">
                      <img v-for="imgSrc in liftEquipment.operationLocation" @click="openImg(imgSrc)" :src="imgSrc" />
                    </div>
                    <div class="context"><span class="l-title">吊车吨位:</span>{{liftEquipment.weight || '-'}}</div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="context"><span class="l-title">起重作业有无带电设备:</span>{{keynote.isLiftHasLivingEquipment ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.liftLiveEquipmentList && keynote.liftLiveEquipmentList.length > 0">
                  <div class="context"><span class="l-title">起重作业带电设备:</span></div>
                  <div v-for="liftLiveEquipment in keynote.liftLiveEquipmentList" style="margin-left: 20px;">
                    <div class="context"><span class="l-title">带电设备名称:</span>{{liftLiveEquipment.name || '-'}}</div>
                    <div class="context"><span class="l-title">带电设备距离(米):</span>{{liftLiveEquipment.distance || '-'}}</div>
                    <div class="context"><span class="l-title">安全距离:</span>{{liftLiveEquipment.safeDistance || '-'}}</div>
                    <div class="context"><span class="l-title">操作位置照片:</span></div>
                    <div v-if="liftLiveEquipment.attachment && liftLiveEquipment.attachment.length > 0" class="img_box">
                      <img v-for="imgSrc in liftLiveEquipment.attachment" @click="openImg(imgSrc)" :src="imgSrc" />
                    </div>
                    <!-- <div class="context"><span class="l-title">电压等级:</span>{{liftLiveEquipment.level ? dicsList.voltageLevel[liftLiveEquipment.level] : '-'}}</div> -->
                    <!-- <div>{{liftLiveEquipment.level || '-'}}</div> -->
                  </div>
                </el-col>
              </el-row>

              <el-row  v-if="keynote.type==='gysy'">
                <el-col :span="20" v-if="keynote.highVoltageTestingEquipment && keynote.highVoltageTestingEquipment.length > 0">
                  <div class="context"><span class="l-title">高压试验设备:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.highVoltageTestingEquipment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfsjgbpsjk'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否涉及高边坡/深基坑:</span>{{keynote.isSlopePit ? '是' : '否'}}</div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfyxlyxdl'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否有相邻电缆:</span>{{keynote.hasAdjustRunningCable ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.adjustRunningCableAttachment && keynote.adjustRunningCableAttachment.length > 0">
                  <div class="context"><span class="l-title">相邻电缆照片:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.adjustRunningCableAttachment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfyxlyxsb'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否有相邻运行设备:</span>{{keynote.hasAdjustRunningDevice ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.adjustRunningDeviceAttachment && keynote.adjustRunningDeviceAttachment.length > 0">
                  <h4></h4>
                  <div class="context"><span class="l-title">相邻运行设备照片:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.adjustRunningDeviceAttachment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="keynote.type==='sfygfdld'">
                <el-col :span="20">
                  <div class="context"><span class="l-title">是否有国防光缆、燃气管道、自来水管、强弱电线:</span>{{keynote.hasFiberPipeline ? '是' : '否'}}</div>
                </el-col>
                <el-col :span="20" v-if="keynote.fiberPipelineAttachment && keynote.fiberPipelineAttachment.length > 0">
                  <div class="context"><span class="l-title">国防光缆、燃气管道、自来水管、强弱电线照片:</span></div>
                  <div class="img_box">
                    <img v-for="imgSrc in keynote.fiberPipelineAttachment" @click="openImg(imgSrc)" :src="imgSrc" />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <el-image-viewer v-if="showImgFlag" :on-close="()=>{showImgFlag=false}" :url-list="imgList"></el-image-viewer>
    </div>
    <div v-if="!showDetail">
      <edit-detail :detailInfo="detail" @close="close"></edit-detail>
    </div>
  </div>
</template>
<script>
import { getSurveyDetail } from '@/api/survey/index'
import { parseTime } from '@/utils/index.js'
import EditDetail from './editDetail.vue'
import { getDics } from '@/api/utils/index'

export default {
  name: "recordDetail",
  props:{
    detailId:{
      type: Number
    },
    showEdit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer'),
    EditDetail
  },
  data() {
    return {
      showDetail: true,
      showImgFlag: false,
      imgList: [],
      surveyJob: [],
      detail: {},
      dicsList: {
        powerLineType: {},
        surveyRisk:{},
        majorHiddenDangerType: {},
        focusTypes: {},
        jobTypes:{},
        hazardousChemicals:{},
        crossOperationType: {},
        auxiliaryClimbingEquipmentType: {},
        lgzyCzlx: {},
        liftEquipmentType: {},
        voltageLevel: {}
      }
    };
  },
  created() {

  },
  async mounted() {
    await this.getDicsList()
    this.getDetail()
  },
  methods: {
    async getDicsList() {
      getDics(['surveyRisk', 'majorHiddenDangerType', 'powerLineType', 'focusTypes', 'jobTypes', 'hazardousChemicals', 'crossOperationType', 'auxiliaryClimbingEquipmentType', 'lgzyCzlx', 'liftEquipmentType', 'voltageLevel']).then(res=>{
        this.dicsList = res.data
      })
    },
    getDetail() {
      getSurveyDetail({id:this.detailId}).then(res => {
        this.detail = res.data
        let list = [...this.detail.surveyJob]
        list.forEach(item => {
          item.typeName =  this.dicsList.jobTypes[item.type]
        })
        if(list.length > 0)this.surveyJob.push(list[0])
      }).catch(error => {
        console.log(error)
      })
    },
    close() {
      this.$emit('close', true)
    },
    openImg(url) {
      this.imgList = [url];
      this.showImgFlag = true;
    },
    dateFormat(date) {
      if(date) {
        return parseTime(date,'{y}-{m}-{d}')
      } else {
        return '-'
      }
    }
  }
};
</script>
<style scoped="scoped" lang="scss">
::v-deep .el-descriptions-item__label {
  color: #303133;
}
.upd-btn {
  position: absolute;
  z-index: 666;
  right: 30px;
  top: 0px;
}
.c-title {
  margin: 10px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 700;
}
.context {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
  .l-title {
    color: #303133;
    padding-right: 10px;
  }
}

h2 {
  color: #303133;
  font-size: 16px;
  font-weight: 700;
}
h4 {
  color: #666666;
  font-weight: normal;
  margin-bottom: 6px;
  font-size: 13px;
}
.detail_box {
  padding: 0px 20px 40px 20px;
  .detail {
    font-size: 15px;
    .content {
      white-space: pre-wrap;
    }
  }
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
}

.img_box {
  margin: 10px 0;
  img {
    cursor: pointer;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    object-fit: cover;
  }
}
</style>

